<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<header-custom title="院校" searchPath="/bks/index/school/list/index" searchPlaceholder="请输入学校名称"
			:isSearchSpace="true" />
		<!-- 筛选导航 -->
		<view class="filter-header w750 fboxRow Ycenter" :style="{top: topNavHeight+'px'}">
			<view class="wrap w750 fboxRow Ycenter">
				<view class="area fboxRow Ycenter font26 color-36363A" @tap="areaClick"><text
						class="bksCIcon bks-c-ziyuan22dangqian"
						style="margin-right:4rpx;"></text>{{filters.area.province}} </view>
				<view class="filter-key flex1 fboxRow Ycenter Xend" @tap="filterClick">
					<view class="color-6A6A6F font22">
						<text v-for="(item, index) in filters.other"
							:key="index">{{index == 0 ? '' : ','}}{{item.tagName}}</text>
					</view>
					<text class="bksCIcon bks-c-ziyuan13shaixuan font26"></text>
				</view>
			</view>
		</view>

		<!-- 筛选 -->
		<u-popup mode="top" :show="popupFilter" zIndex="10" overlayStyle="z-index: 4">
			<view class="filterBox">
				<view :style="{height: topNavHeight+'px'}"></view>
				<!-- overlayStyle -->
				<view  style="height: 72rpx"> </view>
				<view class="filter-item" v-for="(item, index) in filterList" :key="index">
					<view class="tit fboxRow Ycenter font22 color-9899A1">{{item.title}}</view>
					<view class="fboxWrap">
						<view v-for="(subItem, i) in filterData[item.key]" :key="i"
							class="tag fboxRow Ycenter Xcenter font24"
							:class="subItem.on ? 'on bg-EBFAF1 color-00C15D' : ''" :data-key="item.key"
							:data-tag="subItem" @tap="tagClick">{{subItem.tagName}}</view>
					</view>
				</view>
				<!-- <view class="bottom"></view> -->
				<view class="bottom-btn fboxRow">
					<view class="colse flex1 fboxRow Ycenter Xcenter color-36363A" @tap="onClose">关闭</view>
					<view class="filter flex1 fboxRow Ycenter Xcenter color-fff" @tap="onSubmit">筛选</view>
				</view>
			</view>
		</u-popup>

		<!-- 列表 -->
		<view class="scroll-view" style="padding-top:72rpx" id="scroll-view">
			<!-- 间距 -->
			<view class="space-block"></view>
			<view class="scroll-view-item" v-for="(item, index) in dataList.list" :key="index">
				<school-module :info="item" />
			</view>
			<u-loadmore :status="dataList.loading"></u-loadmore>
		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import SchoolModule from '@/pagesBKS/components/school-module.vue';
	import {
		searchSchoolList,
		tagList
	} from '@/api/bks.examinee.js'
	export default {
		components: {
			headerCustom,
			SchoolModule
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				sys: {},
				searchConfig: {
					show: true,
					placeholder: '请输入学校名称',
					value: '',
					pageto: true,
					url: '/pages/index/school/list/index'
				},
				dataList: {
					list: [
						// {
						//   id: 1,
						//   logo: 'https://bks.obs.cn-north-4.myhuaweicloud.com:443/setting/bks-logo.png',
						//   name: '备考生备考生备考生备考生备考生备考生备考生备考生备考生备考生备考生',
						//   tags: ['重庆', '本科', '综合'],
						//   popularity: '1.82W'
						// }
					],
					page: 1,
					size: 10,
					count: 0,
					loading: 'none'
				},
				filters: {
					area: {
						id: 0,
						province: '全国'
					},
					other: [],
					search: ''
				},
				popupFilter: false,

				// 这里是一些组件内部数据
				filterList: [{
						title: '办学层次',
						key: 'level'
					},
					{
						title: '办学性质',
						key: 'nature'
					},
					{
						title: '办学特色',
						key: 'feature'
					},
					{
						title: '办学类型',
						key: 'type'
					}
				],
				filterData: {
					level: [{
							id: '',
							tagName: '不限'
						},
						{
							id: 2001,
							tagName: '普通本科'
						},
						{
							id: 2002,
							tagName: '专科'
						},
					],
					nature: [{
							id: '',
							tagName: '不限'
						},
						{
							id: '公办',
							tagName: '公办'
						},
						{
							id: '民办',
							tagName: '民办'
						},
						{
							id: '中外合办',
							tagName: '中外合办'
						},
					],
					feature: [{
						schoolTagId: '',
						tagName: '不限'
					}],
					type: [{
							id: '5000',
							tagName: '综合类'
						},
						{
							id: '5001',
							tagName: '理工类'
						},
						{
							id: '5002',
							tagName: '农林类'
						},
						{
							id: '5003',
							tagName: '医药类'
						},
						{
							id: '5004',
							tagName: '师范类'
						},
						{
							id: '5005',
							tagName: '语言类'
						},
						{
							id: '5006',
							tagName: '财经类'
						},
						{
							id: '5007',
							tagName: '政法类'
						},
						{
							id: '5008',
							tagName: '体育类'
						},
						{
							id: '5009',
							tagName: '艺术类'
						},
						{
							id: '5010',
							tagName: '民族类'
						},
						{
							id: '5011',
							tagName: '军事类'
						},
						{
							id: '5012',
							tagName: '其他'
						}
					]
				},
				topNavHeight: 0
			}
		},
		onLoad: function(options) {
			this._tagList()
		},
		onReady() {
			uni.createSelectorQuery(this)
				.selectAll('#scroll-view')
				.boundingClientRect(res => {
					this.topNavHeight = res[0].top
				})
				.exec();
		},
		onShow() {
			// 地区
			if (getApp().globalData.area) {
				this.filters.area = getApp().globalData.area
			}
			this._initData()
			this._request()
		},
		onReachBottom: function() {
			this._reachBottom()
		},
		methods: {
			_tagList() {
				const tag = [{
					schoolTagId: '',
					tagName: '不限'
				}]
				// 办学特色
				tagList().then(res => {
					this.filterData.feature = [...tag, ...res.data]
				})
			},
			_initData() {
				this.dataList = {
					list: [],
					page: 1,
					size: 10,
					count: 0
				}
			},
			_request() {
				// 已经没有数据了
				if (this.dataList.loading == 'not') {
					return
				}
				// 加载更多数据
				this.dataList.loading = 'loading'
				const {
					dataList: {
						list,
						page,
						size
					},
					filters: {
						area,
						other,
						search
					}
				} = this
				let reqData = {
					"campusId": "", // 办学层次
					"characteristic": "", // 办学特色
					"collegesId": "", // 办学类型
					"province": area.id, // 按区域
					"schoolName": search,
					"schoolNatureName": "", // 办学性质
					page,
					size
				}
				other.filter(item => {
					if (item.key == 'level') {
						reqData.campusId = item.id
					} else if (item.key == 'nature') {
						reqData.schoolNatureName = item.id
					} else if (item.key == 'feature') {
						reqData.characteristic = item.schoolTagId
					} else if (item.key == 'type') {
						reqData.collegesId = item.id
					}
				})
				searchSchoolList(reqData).then(res => {
					const total = res.data.pageInfoVO.total
					const countList = [...list, ...res.data.list]
					this.dataList.list = countList
					this.dataList.count = total
					if (countList.length >= total && total > 0 || total <= 0) {
						this.dataList.loading = 'nomore'
					} else {
						this.dataList.loading = 'loading'
					}
				}).catch(err => {
					console.log(err)
					this.dataList.loading = 'nomore'
				})
			},
			_reachBottom() {
				if (this.dataList.size * this.dataList.page < this.dataList.count) {
					this.dataList.loading = 'loading';
					this.dataList.page++;
					this._request();
				} else {
					this.dataList.loading = 'nomore';
				}
			},
			// 点击区域打开地区选择
			areaClick() {
				getApp().globalData.area = this.filters.area
				this.$pageTo('/bks/index/school/area/index')
			},
			filterClick() {
				this.popupFilter = !this.popupFilter
			},
			onClose() {
				this._initData()
				this._request()
				this.popupFilter = false
			},
			// 筛选确定
			onSubmit() {
				this._initData()
				this._request()
				this.popupFilter = false
			},
			// 筛选点击
			tagClick(e) {
				const {
					key,
					tag
				} = e.currentTarget.dataset
				let list = []
				let other = this.filters.other
				// 增加和删除数据
				this.filters.other.filter((item, index) => {
					if (key == item.key) {
						other.splice(index, 1)
					}
				})
				if (tag.on) {
					this.filters.other = other
				} else {
					const tags = {
						...tag,
						key
					}
					this.filters.other = [...other, ...[tags]]
				}
				this.filterData[key].filter(item => {
					if (JSON.stringify(item) == JSON.stringify(tag)) {
						item.on = !item.on
					} else {
						item.on = false
					}
					list.push(item)
				})
				const tit = 'filterData.' + key
				this[tit] = list
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter-header {
		height: 72rpx;
		position: fixed;
		left: 0;
		top: 0;
		width: 750rpx;
		background-color: #fff;
		border-bottom: 1px solid #F0F0F5;
		z-index: 20;
	}

	.filter-header .wrap {
		padding: 0 30rpx
	}

	.filter-key .bksCIcon {
		margin-left: 10rpx;
	}

	.icon-filter {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 50%;
	}

	.scroll-view {
		position: relative;
		z-index: 0;
	}
	.filterBox{position: relative;}
	.filter-item {
		padding: 5rpx 10rpx 5rpx 30rpx
	}

	.filter-item .tit {
		height: 54rpx;
	}

	.filter-item .tag {
		margin: 10rpx 20rpx 10rpx 0;
		padding: 4rpx 14rpx;
		width: 157rpx;
		min-height: 54rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #F5F5FA;
		color: #6A6A6F;
		border-radius: 4rpx;
		word-wrap: break-word;
		word-break: normal;
		overflow: hidden;
	}

	.filter-item .on {
		background-color: #EBFAF1;
		color: #00C15D
	}

	.bottom {
		height: 88rpx;
	}

	.filterBox .bottom{}
	.bottom-btn {
		// position: fixed;
		// left: 0;
		// bottom: calc(20vh);
		width: 100%;
		height: 88rpx;
		border-top: 1px solid #F0F0F5;
		z-index: 7;
	}

	.bottom-btn .colse {
		background-color: #fff;
	}

	.bottom-btn .filter {
		background: linear-gradient(-90deg, #00B356 0%, #79DBA8 100%);
	}
</style>